<template>
	<mescroll-uni
		class="mescroll"
		ref="mescroll"
		:fixed="false"
		:down="downOption"
		:up="upOption"
		@init="mescrollInit"
		@down="downCallback"
		@up="upCallback">
		<slot></slot>
	</mescroll-uni>
</template>

<script>
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
// import MescrollBody from 'mescroll-uni/mescroll-body.vue';
export default {
	components: {
		MescrollUni,
		// MescrollBody
	},
	props: {
		// 是否下拉刷新
		refresh: {
			type: Boolean,
			default: false
		},
		// 是否上拉加载
		loading: {
			type: Boolean,
			default: false
		},
		// 是否加载完成
		finish: {
			type: Boolean,
			default: false
		},
		// 是否下拉或上拉运动状态
		motion: {
			type: Boolean,
			default: false
		}
	},
	model: {
		prop: 'motion',
		event: 'change'
	},
	data() {
		return {
			mescroll: null,    // mescroll 实例对象
			downOption: {
				auto: false
			},
			upOption: {
				auto: false,
				toTop: {
					src: ''
				},
				textNoMore: '我是有底线的'
			}
		};
	},
	watch: {
		// 监听是否开启下拉
		refresh(val) {
			if (val) {
				this.mescroll.triggerDownScroll();
			} else {
				this.mescroll.endErr();
			}
		},
		// 监听是否开启上拉
		loading(val) {
			if (val) {
				this.mescroll.triggerUpScroll();
			} else {
				this.mescroll.endErr();
			}
		},
		// 监听是否加载完数据
		finish(val) {
			if (val) this.mescroll.endUpScroll(true);
		},
		// 监听是否处于加载状态
		motion(val) {
			if (!val) this.mescroll.endErr();
		}
	},
	methods: {
		// mescroll 初始化
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		// 下拉回调
		downCallback() {
			this.$emit('change', !this.motion);
			this.$emit('refresh');
		},
		// 上拉回调
		upCallback() {
			if (this.finish) {
				this.mescroll.endUpScroll(true);
			} else {
				this.$emit('change', !this.motion);
				this.$emit('loading');
			}
		}
	}
}
</script>

<style lang="scss">
.mescroll {
	/deep/ .mescroll-bottombar {
		height: 0 !important;
	}
	/deep/ .mescroll-upwarp {
		@include flex;
		justify-content: center;
		.upwarp-nodata {
			color: #C0C4CC;
			font-size: 26rpx;
		}		
	}
}
</style>
